<html>

<head>
<title>Learning WebGL &mdash; lesson 7</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<link href="../lessons.css" type="text/css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="../../../build/PhiloGL.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>

<body onload="webGLStart();">
  <canvas id="lesson07-canvas" style="border: none;" width="500" height="500"></canvas>
  <script src="https://gist.github.com/817964.js"> </script>
<br />
<input type="checkbox" id="lighting" checked /> Use lighting<br/>
(Use cursor keys to spin the box and <code>Page Up</code>/<code>Page Down</code> to zoom out/in)

<br/>
<h2>Directional light:</h2>

<table style="border: 0; padding: 10px;">
<tr>
<td><b>Direction:</b>
<td>X: <input type="text" id="lightDirectionX" value="-0.25" />
<td>Y: <input type="text" id="lightDirectionY" value="-0.25" />
<td>Z: <input type="text" id="lightDirectionZ" value="-1.0" />
</tr>
<tr>
<td><b>Colour:</b>
<td>R: <input type="text" id="directionalR" value="0.8" />
<td>G: <input type="text" id="directionalG" value="0.8" />
<td>B: <input type="text" id="directionalB" value="0.8" />
</tr>
</table>

<h2>Ambient light:</h2>
<table style="border: 0; padding: 10px;">
<tr>
<td><b>Colour:</b>
<td>R: <input type="text" id="ambientR" value="0.2" />
<td>G: <input type="text" id="ambientG" value="0.2" />
<td>B: <input type="text" id="ambientB" value="0.2" />
</tr>
</table>

<a href="http://learningwebgl.com/blog/?p=684">&lt;&lt; Back to Lesson 7</a>
</body>

</html>

